import * as THREE from 'three';

function createText( message, height ) {

    const canvas = document.createElement( 'canvas' );
    const context = canvas.getContext( '2d' );
    let metrics = null;
    const textHeight = 130;
    context.font = 'normal ' + textHeight + 'px Arial';
    metrics = context.measureText( message );
    const textWidth = metrics.width;
    canvas.width = textWidth;
    canvas.height = textHeight;
    context.font = 'normal ' + textHeight + 'px Arial';
    context.textAlign = 'center';
    context.textBaseline = 'middle';
    context.fillStyle = '#00499e';
    context.fillText( message, textWidth / 2, textHeight / 2 );

    const texture = new THREE.Texture( canvas );
    texture.needsUpdate = true;

    const material = new THREE.MeshBasicMaterial( {
        color: 0xffffff,
        side: THREE.DoubleSide,
        map: texture,
        transparent: true,
    } );
    const geometry = new THREE.PlaneGeometry(
        ( height * textWidth ) / textHeight,
        height
    );
    const plane = new THREE.Mesh( geometry, material );
    return plane;

}




function createTextSprite( message, height ) {

    const canvas = document.createElement( 'canvas' );
    const context = canvas.getContext( '2d' );
    let metrics = null;
    const textHeight = 100;
    context.font = 'normal ' + textHeight + 'px Arial';
    metrics = context.measureText( message );
    const textWidth = metrics.width;
    canvas.width = textWidth;
    canvas.height = textHeight;
    context.font = 'normal ' + textHeight + 'px Arial';
    context.textAlign = 'center';
    context.textBaseline = 'middle';
    context.fillStyle = '#ffffff';
    context.fillText( message, textWidth / 2, textHeight / 2 );

    const texture = new THREE.Texture( canvas );
    texture.needsUpdate = true;

    const spriteMaterial = new THREE.SpriteMaterial( {
        color: 0xffffff,
        side: THREE.DoubleSide,
        map: texture,
        transparent: true,
    } );
    // const geometry = new THREE.PlaneGeometry(
    //     ( height * textWidth ) / textHeight,
    //     height
    // );
    const sprite = new THREE.Sprite( spriteMaterial );
    return sprite;

}



export { createText,createTextSprite };
